{% extends "base.html" %}
{% block title %}InviteSquare Event Page{% endblock %}
<!-- Extra style -->
{% block style %}
<link href="/assets/less/event_page.less" rel="stylesheet/less" type="text/css">
{% endblock %}
<!-- Empty Nav Secondary -->
{% block nav_secondary %}{% endblock nav_secondary %}
<!-- Add stuff to Nav Main -->
{% block nav_main_left %}
<ul class="nav">

</ul>
{% endblock %}

{% block nav_main_right %}
<li>
	<a href="#">Profile</a>
</li>
<li>
	<a href="#">Post</a>
</li>
{% if (id) %}
<li class = "edit-btns">
	<a href="#" id="edit-event"><i class="icon-edit"></i>Edit Event</a>
</li>
{% else %}
<li class = "edit-btns">
	<a href="#" id="new-event"><i class="icon-pencil icon-white"></i>New Event</a>
</li>
{% endif  %}
<li>
	<a href="#" id="save-event" style="display:none">Save Event</a>
</li>
{{ super() }}
{% endblock %}

<!-- Content -->
{% block content %}


<div class="row-fluid" id="event-main">
	
	<div class="span1" id="leftbar">
		<div id="organizer-thumb" class="span12" style="margin: 20px; box-shadow: 0 4px 6px #333; border-radius: 8px;">
			<img src="http://4.bp.blogspot.com/-QHIbJ53RpLo/TYySWFK9wQI/AAAAAAAAAAM/xktLLoXUaMI/s1600/coca_cola_logo_design.jpg" width="70" />
		</div>
	</div>
	<div class="span10" id="centerbar" >
		<div class="row-fluid" id="event-header">
			<div class="span7">
				<div>
					<h2 id="event-name" >{{name|default('Untitled Event')}}</h2>
				</div>
				<div>
					<p id="event-organizer" >
						{{organizer|default('Organizer')}}
					</p>
				</div>
			</div>
			<div id="right-social" class="span3">
				<div id="counter">
					<div id="count-inner">
						<h3>3</h3>
					</div>
					<span class="icon-join"></span><h3>joined</h3>
				</div>
				<p>
					<!--<a href="#" class="btn btn btn-success"><span class="icon-join"></span>  Join</a>
					<a href="#" class="btn btn-warning"><span class="icon-invite"></span>  Invite</a>-->
					<a id="watch-event" href="#" class="btn btn-info"><span class="icon-watch icon-white"></span> Watch</a>
				</p>
			</div>
		</div>
		<hr>
		<div class="row-fluid" >
			<div class="span4" id="left2">
				<div class="span12" style="display: none"></div>
				<div class="span12" >
					<h2>Detail </h2>
					<div class="box grey">
						<p id="event-description">
							{{description|default('Add some description for this event')}}
						</p>
					</div>
				</div>
			</div>
			<div class="span8" id="left1">
				<div class="slogan">
					<h2 id="event-slogan">{{slogan|default('Add a slogan for this event')}}</h2>
				</div>
				<div class="flexslider">
					<ul class="slides">
					    <li>
					      <a href="#"><img src="http://lorempixel.com/900/300/sports/" /></a>
						  <p class="flex-caption">This image is wrapped in a link.</p>			
					    </li>
					    <li>
					      <img src="http://lorempixel.com/900/300/sports/" />
					    </li>
					    <li>
					      <img src="http://lorempixel.com/900/300/sports/" />
					    </li>
					</ul>
				</div>
				
				<!-- Post section -->
				<div class="comments-wrapper"  id="post-view">
		
					<input type="text" placeholder="Post to event wall" id="post-input"/>
		
					<button class="btn btn-primary">
						Post
					</button>
					<button class="btn btn-info">
						Ratings
					</button>
					<button class="btn btn-warning" id="new-ticket">
						New Ticket
					</button>
					<button class="btn btn-success" id="new-map">
						Map
					</button>
					<button class="btn btn-primary event-btns" id="new-album">
						Album
					</button>
					<button class="btn btn-success" id="all-photos">
						All Photos
					</button>
				</div>
				
				<div id="post-inner"></div>
				<div id="comment-inner" style ="padding-left:70px;"></div>
			</div>
		</div>
		
	</div>
	<div class="span1" id="rightbar"></div>
	
</div>

<!--<div class="row-fluid" id="event-footer">
</div>-->
{% endblock %}
<!-- Javascript -->
{% block javascript_main %}
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAhVZGHGqpa93pftWQqr2AdMsN7XzEIw_U&sensor=false&language=en"></script>
<script src="/assets/js/plugins/plupload/js/plupload.js"></script>
<script src="/assets/js/plugins/plupload/js/plupload.html5.js"></script>

<!-- Add Flexslider -->
<link rel="stylesheet" href="/assets/js/plugins/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="/assets/js/plugins/flexslider/jquery.flexslider-min.js"></script>

<script src="/assets/js/app/post_module.js"></script>
<script src="/assets/js/app/ticket_module.js"></script>
<script src="/assets/js/app/event_module.js"></script>
<script src="/assets/js/app/map_module.js"></script>
<script src="/assets/js/app/photo_module.js"></script>
<script src="/assets/js/app/slider_module.js"></script>

<script type="text/javascript">
	//<![CDATA[
	Invitesq.eventId = {{id|default(-1)}};
	Invitesq.eventCoverId= {{cover_album|default(-1)}};
	
	// Post list
	Invitesq.eventPostList = {{postList|default(-1)}};
		
	// Location list
	Invitesq.eventLocationList = {{locationList|default(-1)}};
	Invitesq.eventLocationTitles = {{titleList|default(-1)}};
	
	// Ticket list 
	Invitesq.eventTicketList = {{ticketList|default(-1)}};
		
	console.log("Locations" + Invitesq.eventLocationTitles);
	console.log("Posts" + Invitesq.eventPostList.length);
	//]]
</script>
<script src="/assets/js/app/event_page_module.js"></script>
{% endblock %}
